<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stat-cards">
			<view class="stat-card" @click="navigateTo('/pages/student/index')">
				<view class="stat-number">{{ stats.counts?.students?.active || 0 }}</view>
				<view class="stat-label">在读学生</view>
			</view>

			<view class="stat-card" @click="navigateTo('/pages/course/index')">
				<view class="stat-number">{{ stats.counts?.courses?.active || 0 }}</view>
				<view class="stat-label">开课课程</view>
			</view>

			<view class="stat-card" @click="navigateTo('/pages/enrollment/index')">
				<view class="stat-number">{{ stats.counts?.enrollments?.active || 0 }}</view>
				<view class="stat-label">有效报名</view>
			</view>

			<view class="stat-card" @click="navigateTo('/pages/payment/index')">
				<view class="stat-number">{{ formatMoney(stats.net_income || 0) }}</view>
				<view class="stat-label">净收入</view>
			</view>

			<view class="stat-card" @click="navigateTo('/pages/attendance/index')">
				<view class="stat-number">{{ stats.counts?.attendance?.present || 0 }}</view>
				<view class="stat-label">出勤次数</view>
			</view>

			<view class="stat-card" @click="navigateTo('/pages/payment/index')">
				<view class="stat-number">{{ formatMoneyInteger(stats.net_income || 0) }}</view>
				<view class="stat-label">净收入</view>
			</view>
		</view>

		<!-- 快捷操作区 -->
		<view class="quick-actions spacing-md">
			<view class="section-title">
				<text class="text-subtitle">快捷操作</text>
			</view>

			<view class="action-grid">
				<view class="action-item" @click="navigateTo('/pages/student/add')">
					<view class="action-icon-wrapper">
						<uni-icons type="personadd" size="26" color="#0A6CFF"></uni-icons>
					</view>
					<text class="action-text">新增学生</text>
				</view>

				<view class="action-item" @click="navigateTo('/pages/course/add')">
					<view class="action-icon-wrapper">
						<uni-icons type="plus" size="26" color="#2DCE89"></uni-icons>
					</view>
					<text class="action-text">新增课程</text>
				</view>

				<view class="action-item" @click="navigateTo('/pages/enrollment/add')">
					<view class="action-icon-wrapper">
						<uni-icons type="paperplane" size="26" color="#FFAB00"></uni-icons>
					</view>
					<text class="action-text">学生报名</text>
				</view>

				<view class="action-item" @click="navigateTo('/pages/payment/add')">
					<view class="action-icon-wrapper">
						<uni-icons type="wallet" size="26" color="#11CDEF"></uni-icons>
					</view>
					<text class="action-text">登记缴费</text>
				</view>

				<view class="action-item" @click="navigateTo('/pages/attendance/add')">
					<view class="action-icon-wrapper">
						<uni-icons type="calendar" size="26" color="#F5365C"></uni-icons>
					</view>
					<text class="action-text">课程考勤</text>
				</view>

				<view class="action-item" @click="navigateTo('/pages/statistics/index')">
					<view class="action-icon-wrapper"
						style="background-color: rgba(66, 165, 245, 0.08); box-shadow: 0 8px 20px rgba(66, 165, 245, 0.3); border: 1px solid rgba(66, 165, 245, 0.1);">
						<uni-icons type="list" size="26" color="#42A5F5"></uni-icons>
					</view>
					<text class="action-text">数据统计</text>
				</view>
			</view>
		</view>

		<!-- 待处理事项 -->
		<view class="alert-section spacing-md">
			<view class="section-title">
				<text class="text-subtitle">待处理事项</text>
			</view>

			<view class="alert-card" v-if="stats.unpaid?.count > 0" @click="navigateTo('/pages/payment/unpaid')">
				<view class="alert-icon">
					<uni-icons type="info" size="22" color="#F5365C"></uni-icons>
				</view>
				<view class="alert-content">
					<view class="alert-title">欠费提醒</view>
					<view class="alert-desc ellipsis">当前有 {{ stats.unpaid.count }} 名学生存在欠费</view>
				</view>
				<uni-icons type="right" size="18" color="#8898AA"></uni-icons>
			</view>

			<view class="empty-alerts" v-if="!stats.unpaid?.count">
				<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
				<text class="text-hint">暂无待处理事项</text>
			</view>
		</view>

		<!-- 最近缴费记录 -->
		<view class="recent-section spacing-md">
			<view class="section-title">
				<text class="text-subtitle">最近缴费记录</text>
				<text class="title-action" @click="navigateTo('/pages/payment/index')">查看全部</text>
			</view>

			<view class="recent-list">
				<view class="empty-recent" v-if="!stats.payment?.recent || stats.payment.recent.length === 0">
					<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
					<text class="text-hint">暂无缴费记录</text>
				</view>

				<view v-else v-for="(item, index) in stats.payment.recent.slice(0, 5)" :key="index" class="recent-item">
					<view class="recent-date ellipsis">{{ item.date }}</view>
					<view class="recent-info">
						<text class="text-caption">缴费笔数: {{ item.count }}笔</text>
						<text class="text-caption color-success">¥{{ formatMoney(item.amount) }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="dashboard-footer">
			<text class="text-hint ellipsis" style="max-width: 75%;">数据更新时间:
				{{ formatDateTime(stats.last_updated) }}</text>
			<view class="refresh-link" @click="loadDashboardStats">
				<uni-icons type="refresh" size="16" color="#0A6CFF" style="margin-right: 4px;"></uni-icons>
				<text>刷新</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	// 统计数据
	const stats = ref({});
	const loading = ref(false);

	// 页面加载
	onMounted(() => {
		loadDashboardStats();
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		loadDashboardStats();
	});

	// 加载仪表盘数据
	async function loadDashboardStats() {
		loading.value = true;

		try {
			const statisticsCloud = uniCloud.importObject('statistics');
			const result = await statisticsCloud.getDashboardStats();

			stats.value = result;
		} catch (error) {
			console.error('加载统计数据失败:', error);
			uni.showToast({
				title: '加载统计数据失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
			uni.stopPullDownRefresh();
		}
	}

	// 导航到其他页面
	function navigateTo(url) {
		uni.navigateTo({
			url
		});
	}

	// 格式化金额
	function formatMoney(amount) {
		if (!amount && amount !== 0) return '0.00';
		return (amount / 100).toFixed(2);
	}

	// 格式化金额为整数
	function formatMoneyInteger(amount) {
		if (!amount && amount !== 0) return '0';
		return Math.floor(amount / 100);
	}

	// 格式化日期时间
	function formatDateTime(dateTime) {
		if (!dateTime) return '--';

		const date = new Date(dateTime);

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');

		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');

		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
</script>

<style>
	/* 基础样式变量 - iOS风格 */
	.container {
		padding: 24px 24px 32px;
		background-color: #F8F9FC;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 统一间距系统 */
	.spacing-xs {
		margin-bottom: 4px;
	}

	.spacing-sm {
		margin-bottom: 8px;
	}

	.spacing-md {
		margin-bottom: 16px;
	}

	.spacing-lg {
		margin-bottom: 24px;
	}

	.spacing-xl {
		margin-bottom: 32px;
	}

	.spacing-xxl {
		margin-bottom: 48px;
	}

	/* 统一字体系统 */
	.text-title {
		font-size: 28px;
		font-weight: 600;
		color: #172B4D;
		letter-spacing: -0.3px;
	}

	.text-subtitle {
		font-size: 22px;
		font-weight: 600;
		color: #172B4D;
		letter-spacing: -0.2px;
	}

	.text-body-large {
		font-size: 16px;
		color: #172B4D;
	}

	.text-body {
		font-size: 15px;
		color: #172B4D;
	}

	.text-body-small {
		font-size: 14px;
		color: #172B4D;
		letter-spacing: 0.1px;
	}

	.text-caption {
		font-size: 13px;
		color: #8898AA;
		letter-spacing: 0.1px;
	}

	.text-hint {
		font-size: 12px;
		color: #8898AA;
		letter-spacing: 0.2px;
	}

	/* 统一卡片样式 */
	.ios-card {
		background-color: #FFFFFF;
		border-radius: 16px;
		padding: 24px;
		margin-bottom: 16px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	}

	/* 顶部统计卡片 */
	.stat-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 32px;
		margin-top: 8px;
	}

	.stat-card {
		width: 37%;
		background-color: #FFFFFF;
		border-radius: 16px;
		padding: 16px;
		margin-bottom: 16px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(233, 236, 239, 0.5);
	}

	.stat-card:nth-child(1) {
		background: linear-gradient(135deg, rgba(10, 108, 255, 0.03), rgba(0, 87, 227, 0.01));
	}

	.stat-card:nth-child(2) {
		background: linear-gradient(135deg, rgba(45, 206, 137, 0.03), rgba(17, 205, 239, 0.01));
	}

	.stat-card:nth-child(3) {
		background: linear-gradient(135deg, rgba(17, 205, 239, 0.03), rgba(255, 171, 0, 0.01));
	}

	.stat-card:nth-child(4) {
		background: linear-gradient(135deg, rgba(255, 171, 0, 0.03), rgba(245, 54, 92, 0.01));
	}

	.stat-card::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(to right, #0A6CFF, #0057E3);
		opacity: 1;
	}

	.stat-card:nth-child(2)::after {
		background: linear-gradient(to right, #2DCE89, #11CDEF);
	}

	.stat-card:nth-child(3)::after {
		background: linear-gradient(to right, #11CDEF, #FFAB00);
	}

	.stat-card:nth-child(4)::after {
		background: linear-gradient(to right, #FFAB00, #F5365C);
	}

	.stat-card:active {
		transform: scale(0.98) translateY(2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		background-color: #FCFCFC;
	}

	.stat-number {
		font-size: 32px;
		font-weight: 600;
		color: #0A6CFF;
		margin-bottom: 8px;
		letter-spacing: -0.4px;
		font-family: 'SF Mono', monospace;
	}

	.stat-card:nth-child(2) .stat-number {
		color: #2DCE89;
	}

	.stat-card:nth-child(3) .stat-number {
		color: #FFAB00;
	}

	.stat-card:nth-child(4) .stat-number {
		color: #11CDEF;
	}

	.stat-label {
		font-size: 15px;
		color: #8898AA;
		letter-spacing: 0;
	}

	/* 区域标题 */
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 32px 0 16px;
		padding: 0 4px;
		width: 100%;
		box-sizing: border-box;
		overflow: visible;
	}

	.section-title text:first-child {
		flex: 1;
		font-size: 22px;
		font-weight: 600;
		color: #172B4D;
		letter-spacing: -0.2px;
		position: relative;
		padding-left: 12px;
	}

	.section-title text:first-child::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 18px;
		background: linear-gradient(to bottom, #0A6CFF, #0057E3);
		border-radius: 2px;
	}

	.title-action {
		font-size: 15px;
		color: #0A6CFF;
		font-weight: 500;
		padding: 6px 12px;
		white-space: nowrap;
		margin-left: auto;
		flex-shrink: 0;
		transition: all 0.2s ease;
		border-radius: 20px;
		background-color: rgba(10, 108, 255, 0.08);
	}

	.title-action:active {
		opacity: 0.8;
		transform: translateY(1px);
		background-color: rgba(10, 108, 255, 0.12);
	}

	/* 快捷操作区 */
	.quick-actions {
		margin-bottom: 24px;
	}

	.action-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -8px;
		padding: 16px 8px;
		background-color: #FFFFFF;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(233, 236, 239, 0.5);
	}

	.action-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 24px;
		transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
		padding: 0 8px;
		box-sizing: border-box;
	}

	.action-item:active {
		transform: scale(0.95);
	}

	.action-item:active .action-icon-wrapper {
		transform: scale(0.92);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	}

	.action-icon-wrapper {
		width: 60px;
		height: 60px;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
		transition: all 0.3s ease;
		box-shadow: 0 10px 24px rgba(10, 108, 255, 0.3);
		background-color: rgba(10, 108, 255, 0.08);
		border: 1px solid rgba(10, 108, 255, 0.1);
	}

	.action-item:nth-child(1) .action-icon-wrapper {
		background-color: rgba(10, 108, 255, 0.08);
		box-shadow: 0 8px 20px rgba(10, 108, 255, 0.3);
		border: 1px solid rgba(10, 108, 255, 0.1);
	}

	.action-item:nth-child(2) .action-icon-wrapper {
		background-color: rgba(45, 206, 137, 0.08);
		box-shadow: 0 8px 20px rgba(45, 206, 137, 0.3);
		border: 1px solid rgba(45, 206, 137, 0.1);
	}

	.action-item:nth-child(3) .action-icon-wrapper {
		background-color: rgba(255, 171, 0, 0.08);
		box-shadow: 0 8px 20px rgba(255, 171, 0, 0.3);
		border: 1px solid rgba(255, 171, 0, 0.1);
	}

	.action-item:nth-child(4) .action-icon-wrapper {
		background-color: rgba(17, 205, 239, 0.08);
		box-shadow: 0 8px 20px rgba(17, 205, 239, 0.3);
		border: 1px solid rgba(17, 205, 239, 0.1);
	}

	.action-item:nth-child(5) .action-icon-wrapper {
		background-color: rgba(245, 54, 92, 0.08);
		box-shadow: 0 8px 20px rgba(245, 54, 92, 0.3);
		border: 1px solid rgba(245, 54, 92, 0.1);
	}

	.action-item:nth-child(6) .action-icon-wrapper {
		background-color: rgba(66, 165, 245, 0.08);
		box-shadow: 0 8px 20px rgba(66, 165, 245, 0.3);
		border: 1px solid rgba(66, 165, 245, 0.1);
	}

	.action-text {
		font-size: 14px;
		color: #172B4D;
		text-align: center;
		letter-spacing: 0;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		margin-top: 4px;
	}

	/* 统一图标颜色 */
	.icon-primary {
		color: #0A6CFF;
	}

	/* 主色 */
	.icon-success {
		color: #2DCE89;
	}

	/* 成功色 */
	.icon-warning {
		color: #FFAB00;
	}

	/* 警告色 */
	.icon-info {
		color: #11CDEF;
	}

	/* 信息色 */
	.icon-danger {
		color: #F5365C;
	}

	/* 错误色 */
	.icon-accent {
		color: #42A5F5;
	}

	/* 强调色 */

	/* 状态颜色 */
	.color-primary {
		color: #0A6CFF;
	}

	/* 主色 */
	.color-success {
		color: #2DCE89;
	}

	/* 成功色 */
	.color-warning {
		color: #FFAB00;
	}

	/* 警告色 */
	.color-danger {
		color: #F5365C;
	}

	/* 错误色 */
	.color-info {
		color: #11CDEF;
	}

	/* 信息色 */
	.color-accent {
		color: #42A5F5;
	}

	/* 强调色 */

	.bg-primary-light {
		background-color: rgba(10, 108, 255, 0.05);
	}

	.bg-success-light {
		background-color: rgba(45, 206, 137, 0.05);
	}

	.bg-warning-light {
		background-color: rgba(255, 171, 0, 0.05);
	}

	.bg-danger-light {
		background-color: rgba(245, 54, 92, 0.05);
	}

	.bg-info-light {
		background-color: rgba(17, 205, 239, 0.05);
	}

	.bg-accent-light {
		background-color: rgba(66, 165, 245, 0.05);
	}

	/* 待处理事项 */
	.alert-section {
		margin-bottom: 24px;
	}

	.alert-card {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 16px;
		padding: 20px 24px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		border: 1px solid rgba(233, 236, 239, 0.5);
		border-left: 4px solid #F5365C;
	}

	.alert-card:active {
		background-color: #FCFCFC;
		transform: translateX(2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	}

	.alert-icon {
		width: 48px;
		height: 48px;
		border-radius: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16px;
		background-color: rgba(245, 54, 92, 0.1);
	}

	.alert-content {
		flex: 1;
		min-width: 0;
		/* 防止子元素溢出 */
	}

	.alert-title {
		font-size: 18px;
		font-weight: 600;
		color: #172B4D;
		letter-spacing: -0.1px;
	}

	.alert-desc {
		font-size: 15px;
		color: #8898AA;
		margin-top: 4px;
		letter-spacing: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.empty-alerts {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48px 0;
		background-color: #FFFFFF;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(233, 236, 239, 0.5);
	}

	.empty-image {
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
		opacity: 0.4;
	}

	.empty-alerts text,
	.empty-recent text {
		font-size: 15px;
		color: #8898AA;
		letter-spacing: 0;
	}

	/* 最近缴费记录 */
	.recent-section {
		margin-bottom: 32px;
		overflow: visible;
	}

	.recent-list {
		background-color: #FFFFFF;
		border-radius: 16px;
		padding: 24px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		width: 100%;
		box-sizing: border-box;
		border: 1px solid rgba(233, 236, 239, 0.5);
	}

	.recent-item {
		padding: 16px 0;
		border-bottom: 1px solid #E9ECEF;
		transition: background-color 0.3s ease;
	}

	.recent-item:active {
		background-color: #F6F9FC;
		transform: translateX(2px);
	}

	.recent-item:last-child {
		border-bottom: none;
	}

	.recent-date {
		font-size: 16px;
		font-weight: 600;
		color: #172B4D;
		margin-bottom: 8px;
		letter-spacing: -0.1px;
	}

	.recent-info {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #8898AA;
		width: 100%;
	}

	.recent-info text:first-child {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.recent-info text:last-child {
		font-weight: 600;
		padding-left: 12px;
		flex-shrink: 0;
		font-family: 'SF Mono', monospace;
	}

	.empty-recent {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48px 0;
	}

	/* 页脚 */
	.dashboard-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		color: #8898AA;
		margin-top: 32px;
		padding: 0;
		letter-spacing: 0.2px;
	}

	.refresh-link {
		color: #0A6CFF;
		font-weight: 500;
		padding: 8px 16px;
		border-radius: 20px;
		background-color: rgba(10, 108, 255, 0.1);
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(10, 108, 255, 0.15);
		display: flex;
		align-items: center;
	}

	.refresh-link:active {
		background-color: rgba(10, 108, 255, 0.15);
		transform: scale(0.96);
		box-shadow: 0 2px 6px rgba(10, 108, 255, 0.15);
	}

	/* 防止溢出 */
	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>